<template >
  <div class="cateview">
    <!-- 面包屑导航 -->
    <bread-view :gab="'icon-angle-right'" class="br">
      <bread-item :to="'/'">首页</bread-item>
      <transition name="bread">
        <bread-item :key="subCate&&subCate.id"> {{ subCate && subCate.name }}</bread-item>
      </transition>
    </bread-view>
    <!-- 轮播图 -->
    <div class="cateswiper">
      <swiper-view></swiper-view>
    </div>
    <!-- 全部子分类 -->
    <div class="sub-list"> 
      <h3>全部分类</h3>
      <ul v-if="subCate">
        <li v-for="item in subCate.children" :key="item.id">
          <a href="javascript:;">
            <img :src="item.picture" alt="" />
            <p>{{ item.name }}</p>
          </a>
        </li>
      </ul>
    </div>
    <!-- 子分类推荐数据 -->
    <two-view :nowid="nowid"></two-view>
  </div>
</template>

<script>
import BreadItem from "../utils/Bread/BreadItem.vue";
import BreadView from "../utils/Bread/BreadView.vue";
import SwiperView from "../utils/SwiperView.vue";
import TwoView from "./TwoView.vue";
export default {
  components: {
    BreadView,
    BreadItem,
    SwiperView,
    TwoView,
  },

  data() {
    return {
      nowid: null,
    };
  },

  mounted() {
    //获取地址栏数量
    this.nowid = this.$route.query.id;
  },
  computed: {
    subCate() {
      let nowobj = this.$store.state.category.cate.find((item) => {
        return item.id == this.nowid;
      });

      // console.log(nowobj);
      return nowobj;
    },
  },
  watch: {
    $route: {
      handler(val) {
        this.nowid = val.query.id;
      },
    },
  },
};
</script>

<style lang="scss" >
@import "@/assets/css/color.scss";
.cateview {
  width: 1240px;
  margin: auto;
  .cateswiper {
    width: 100%;
    height: 500px;
    .prev {
      left: 20px;
    }
    // background: red;
  }
  .sub-list {
    h3 {
      font-size: 28px;
      color: #666;
      font-weight: 400;
      text-align: center;
      line-height: 100px;
    }
    ul {
      display: flex;
      padding: 0 32px;
      flex-wrap: wrap;
      min-height: 160px;
      li {
        width: 168px;
        height: 160px;
        a {
          text-align: center;
          display: block;
          font-size: 16px;
          img {
            width: 100px;
            height: 100px;
            p {
              line-height: 40px;
            }
          }
        }
      }
      li:hover p {
        color: $xtxColor;
      }
    }
  }
}
.bread-enter,
.bread-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}
.bread-enter-to,
.bread-leave {
  opacity: 1;
  transform: translateX(0px);
}
.bread-leave-active {
  transition: all .5s linear;
}

</style>